﻿<template>
  <swiper :options="swiperOption" class="swiper_btn">
    <swiper-slide v-for="slide in swiperSlides">
		<div class="wrap_img">
			<div class="wrap_img_box">
                <img src="../../../static/img/login_bg.png">
                <p class="wrap_img_box_name">
                  火烧明信片
                </p>
                <p class="wrap_img_box_list">
                  好有创意的火烧名信片，求带走
                </p>
                <div class="wrap_img_box_last_list mar_top_1">
                    <div>积分:</div>
                    <div class="wrap_img_dot">100点</div>
                </div>
                <div class="wrap_img_box_last_list">
                  <div>需赚:</div>
                  <div class="wrap_img_dot">100个</div>
                </div>
			</div>
            <div class="wrap_img_box">

            </div>
            
		</div>
	</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev">
      
    </div>
    <div class="swiper-button-next" slot="button-next">
      
    </div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          autoplay: 3500,
          setWrapperSize :true,
          //pagination : '.swiper-pagination',
          paginationClickable :true,
          mousewheelControl : true,
          observeParents: true,
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
        },
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
    mounted() {
      setInterval(() => {
        //console.log('simulate async data')
        let swiperSlides = this.swiperSlides
        if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
      }, 3000)
    }
  }
</script>
<style scoped>
  .wrap_img_dot{
    padding-right:10%;
  }
  .mar_top_1 {
    margin-top: 0.3rem;
  }
  .wrap_img_box_last_list {
    color: #9f5c2f;
    line-height: 1;
    font-size: 0.4rem;
    display: flex;
    padding-left:4%;
    padding-right:4%;
    justify-content:space-between;
  }
  .wrap_img_box_list {
    color: #9f9f9f;
    font-size: 0.5rem;
    padding-left: 4%;
    text-align: left;
    line-height: 1.2;
  }
  .wrap_img_box_name {
    font-size: 0.5rem;
    margin-top: 0.575rem;
    margin-bottom: 0.35rem;
    line-height: 1;
    font-weight: 600;
    text-align: left;
    padding-left: 5%;
  } 
  .swiper-button-prev {
    user-select: none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_left.png")
  }
  .swiper-button-next {
    user-select:none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_right.png")
  } 
  .swiper_btn {
    position: relative;
  }
  .wrap_img {
    width: 76vw;
    height: 8.4rem;
    margin: 0.5rem auto 0;
    display: flex;
    justify-content: space-between
  }
  .wrap_img_box{
		width:35vw;
		height:8.2rem;
		background-color:#fff;
		box-shadow:0 0 8px 2px rgba(181, 175, 175, 0.4);
		border-radius:1vw;
  }
  .wrap_img_box img{
    display:block;
    width:100%;
    height:4.2rem;
  }
  .wrap_img_box:nth-child(2) {
    // margin-left:4vw;
  }
  .swiper_btn_left {
    position:absolute;
    left:1vw;
  }
  .swiper_btn_left img{
    display:block
  }
  .swiper_btn_left {
    position: absolute;
    right: 1vw;
  }
  .swiper_btn_left img{
    display:block;
  }
</style>